<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册表单验证</title>
		<style type="text/css">
			.errInfo{color: red; font-size: 12px;}
			.errInfo img{ vertical-align:middle;}

			form span {
				display: none;
				color: red;
			}
		</style>
	</head>
	<body>
		<form action="Demo12_01.html" >
		<table width="1000" align="center">
			<caption>用户注册</caption>
			<tr>
				<td width="300" align="right" height="30">用户名:</td>
				<td width="700"><input type="text" id="txtAccount" >
					<span id="spanAccount" class="errInfo">用户名不能为空</span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">密码:</td>
				<td width="700"><input type="password" id="txtPwd" >
					<span id="spanPwd" class="errInfo">密码不能为空</span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">密码确认:</td>
				<td width="700"><input type="password" id="txtPwdOk" ">
					<span id="spanPwdOk" class="errInfo">请输入相同的密码</span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">性别:</td>
				<td width="700">
					<input type="radio" name="sex" id="rdBoy" value="男" >男
					<input type="radio" name="sex" id="rdGirl" value="女" >女	
					<span id="spanSex" class="errInfo">请选择性别</span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">专业:</td>
				<td width="700">
					<select id="selProfessional" >
						<option value="">--请选择--</option>
						<option value="软件开发">软件开发</option>
						<option value="电子商务">电子商务</option>
						<option value="国际贸易">国际贸易</option>
						<option value="工商管理">工商管理</option>
						<option value="高级护理">高级护理</option>
					</select>
					<span id="spanProfessional" class="errInfo">请选择你的专业</span>
				</td>
			</tr>			
			<tr>
				<td width="300" align="right" height="30">爱好:</td>
				<td width="700" >
					<input type="checkbox" name="hobby" value="抽烟" "/>抽烟
					<input type="checkbox" name="hobby" value="喝酒" "/>喝酒
					<input type="checkbox" name="hobby" value="打游戏" "/>打游戏
					<input type="checkbox" name="hobby" value="烫头发" "/>烫头发
					<input type="checkbox" name="hobby" value="足球" "/>足球
					<input type="checkbox" name="hobby" value="篮球" "/>篮球
					<span id="spanHobby" class="errInfo">必须选择一个爱好</span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">自我介绍:</td>
				<td width="700">
					<textarea id="mySelf" rows="10" cols="60"></textarea>
					<span >自我介绍不能为空</span>
				</td>
			</tr>
			<tr>
				<td width="300" align="right" height="30">&nbsp;</td>
				<td width="700">
					<input type="submit" value="注册" />
					<input type="reset" value="取消" />
				</td>
			</tr>
		</table>
		</form>		
	</body>
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script>
		$('#txtAccount').blur(function () {
			if ($(this).val()=='') {
				$(this).siblings('span').css('display','inline-block')
			}else{
				$(this).siblings('span').css('display','none')
			}
		}
		)
		$('#txtPwd').blur(function () {
			if ($(this).val()=='') {
				$(this).siblings('span').css('display','inline-block')
			}else{
				$(this).siblings('span').css('display','none')
			}
		}
		)
		$('#txtPwdOk').blur(function () {
			if($(this).val()!=$('#txtPwd').val() || $(this).val()==''){
				$(this).siblings('span').css('display','inline-block')
			}else{
				$(this).siblings('span').css('display','none')
			}
		}
		)
		$(':radio').change(function () {
			$('#spanSex').css('display','none')
		}
		)
		$('#selProfessional').change(function () {
			if ($('selProfessional')) {
				if ($('#selProfessional :selected').val()=='') {
					$('#spanProfessional').css('display','inline-block')
				}else{
					$('#spanProfessional').css('display','none')
				}
			}
		})
		$(':checkbox').change(function () {
			index=0
			$(':checkbox').each(
			function () {
				if ($(this)[0].checked==true) {
					index++
				}
			}
			)
			if (index==0){
				$('#spanHobby').css('display','inline-block')
			}else{
				$('#spanHobby').css('display','none')
			}
		}
		)

		$('#mySelf').blur(function () {
			if ($(this).val()=='') {
				$(this).siblings('span').css('display','inline-block')
			}else{
				$(this).siblings('span').css('display','none')
			}
		}
		)


		$(':submit').click(function () {
			var i=0
			if ($('#txtAccount').val()=='') {
				$('#txtAccount').siblings('span').css('display','inline-block')
			}else{
				$('#txtAccount').siblings('span').css('display','none')
				i++
			}
			
			if ($('#txtPwd').val()=='') {
				$('#txtPwd').siblings('span').css('display','inline-block')
			}else{
				$('#txtPwd').siblings('span').css('display','none')
				i++
			}
		
			if($('#txtPwdOk').val()!=$('#txtPwd').val() || $('#txtPwdOk').val()==''){
				$('#txtPwdOk').siblings('span').css('display','inline-block')
			}else if ($('#txtPwdOk').val()!='') {
				$('#txtPwdOk').siblings('span').css('display','none')
				i++
			}
	
			if ($('#mySelf').val()=='') {
				$('#mySelf').siblings('span').css('display','inline-block')
			}else{
				$('#mySelf').siblings('span').css('display','none')
				i++
			}

			if($(':radio')[0].checked==false && $(':radio')[1].checked==false) {
			$('#spanSex').css('display','inline-block')
			}else{
			$('#spanSex').css('display','none')
			i++
			}
			if ($('#selProfessional :selected').val()=='') {
					$('#spanProfessional').css('display','inline-block')
			}else{
				$('#spanProfessional').css('display','none')
				i++
			}
			index=0
			$(':checkbox').each(
			function () {
				if ($(this)[0].checked==true) {
					index++
				}
			}
			)
			if (index==0){
				$('#spanHobby').css('display','inline-block')
			}else{
				$('#spanHobby').css('display','none')
				i++
			}
			if (i==7) {
				return true
			}else{
				return false
			}
		}
		)
	</script>
</html>